<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疾病初筛</title>
</head>
<style>
    *{
    margin:0;
    padding:0;
}
body{
    background-color:rgb(255,255,255);
    background-image: url({{ url_for('static', filename='body_backpicture.png') }});
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}





.top{
    position:relative;
    overflow: hidden;
    height:70px;
    width: 1010px;
    margin:0px auto 0px auto;
    overflow: auto;
    background:rgba(40, 115,180, 0.4);
}
.top .x_logo{
    float: left;
    overflow: hidden;
    margin-left: 10px;
    margin-top:10px;
    height:50px;
    width:50px;
    background-image: url({{ url_for('static', filename='logo.png') }});
    background-size: cover;
}
.top .x_slogan{
    float: left;
    overflow: hidden;
    height:50px;
    font:normal bold 36px '宋体';
    color:rgb(255,255,255);
    line-height: 70px;
    text-indent: 1em;
}
.top .x_titleall{
    overflow: hidden;
    float: right;
    height:70px;
    color:rgb(255,255,255);
}
.top .x_titleall .x_titlecn{
    overflow: hidden;
    margin:10px auto 0px auto;
    font:normal bold 30px '宋体';
    color:rgb(255,255,255);
    text-align: center;
}
.top .x_titleall .x_titleen{
    overflow: hidden;
    margin:0px 0px 15px auto;
    font:normal bold 10px '宋体';
    color:rgb(255,255,255);
}





.mainone{
    position:relative;
    height:1260px;
    width: 1010px;
    margin:20px auto 20px auto;
    background-color:rgb(245,245,245);
}
.mainone .theme{
    position: relative;
    background:rgba(7, 7, 7, 0.3);
    height:50px;
    width: 1010px;
    margin:0px 0px 5px 0px;
    color:rgb(255,255,255);
}
.mainone .theme a{
    display: inline-block;
    position: relative;
    height:50px;
    padding: 0 20px 0 20px;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    text-decoration: none;
    line-height: 50px;
}
.mainone .theme a:hover{
    background-color:rgba(7, 7, 7, 0.5);
}




.mainone .pic{
    float:left;
    background-color: rgb(255, 255, 255);
    height:590px;
    width: 490px;
    margin:5px 10px 5px 10px;
}
.x_pic{
    width:100%;
    height:490px;
}
.symptom{
    font-size: 12px;
    margin:5px;
}
.name{
    float:left;
    bottom: 5px;
    display: block;
    width: 490px;
    font:normal bold 24px '宋体';
    color:black;
    text-decoration: none;
    text-align: center;
}
.name:hover{
    color: orange;
}
.mainone .pic2{
    float:left;
    background-color: rgb(255, 255, 255);
    height:590px;
    width: 490px;
    margin:5px 10px 5px 0px;
}





.maintwo{
    position:relative;
    height:450px;
    width: 1010px;
    margin:20px auto;
}
/* 轮播图父盒子!!!!!!!!!!!!!!!!!!!!! */
.maintwo .rollpicture{
    position:absolute;
    height:450px;
    width: 600px;
}
.rollpicture img{
    width: 100%;
    height: 100%;
}
/* 问答区父盒子！！！！！！！！！！！！！！！！！！ */
.maintwo .q_a{
    position:absolute;
    left:610px;
    top:-20px;
    background-color: rgb(255, 255, 255);
    height:450px;
    width: 400px;
    margin:20px auto;
}
.maintwo .q_a .head{
    position: relative;
    background:rgba(7, 7, 7, 0.3);
    height:50px;
    width:  400px;
    margin:0px 0px 0px 0px;
}

.maintwo .q_a .head h1{
    position: relative;
    height:50px;
    padding: 0 20px 0 20px;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    line-height: 50px;
}

.maintwo .q_a .question{
    margin:10px 10px 10px 10px;
    width:  380px;
    height:370px;
    font:normal bold 16px '宋体';
    background-color:rgb(255,255,255);
}
.mainone .q_a .question .biao{
    height:590px;
    width: 400px;
    margin:0 auto;
}
.maintwo .q_a .question .block{
    box-sizing:border-box;
    height: 30px;
    margin:0px auto 5px auto;
}
button{
	width: 400px;
	height: 40px;
	font-size: 24px;
}


.maintwo .q_a .more{
    text-align: right;
    width:400px;
    margin:0px 5px 5px 0px;
}

.maintwo .q_a .more a{
    text-decoration: none;
    color:black;
}

.maintwo .q_a .more  :hover{
    background:rgb(202, 212, 243);
}




.bottomlan{
    position:relative;
    background:rgba(7, 7, 7, 0.5);
    height:50px;
    width: 1010px;
    margin:20px auto 0px auto;
    font:normal bold 24px '宋体';
    color:rgb(255,255,255);
    line-height: 50px;
    text-align: center;
}
</style>
<body>
     <!-- 头部盒子 -->
    <div class='top'>
        <!-- logo盒子 -->
        <div class='x_logo'>
        </div>
        <!-- 标语盒子 -->
        <div class='x_slogan'>
            多一点健康关注,少一份疾病担忧
        </div>
        <div class="x_titleall">
            <p class="x_titlecn">疾病自测网</p>
            <p class="x_titleen">Disease self-test network</p>
        </div>
    </div>
    <!-- 常见心理疾病介绍 -->
    <div class='mainone'>
        <!-- 标题 -->
        <div class='theme'>
            <a href='#introduction'>拟合模型介绍</a>
            <a href='#data'>数据输入</a>
        </div>
        <!-- 图片 -->
        <div class='pic' id='introduction'>
            <img class='x_pic' src="{{ url_for('static', filename='1.png')}}">
            <p class="symptom">均方误差 MSE:0.5212740055076007<br>
                均方根误差 RMSE:0.7219930785731957<br>
                R平方为：0.5033798502381803</p>
            <a class="name"
            href="https://baike.baidu.com/item/%E7%BA%BF%E6%80%A7%E5%9B%9E%E5%BD%92/8190345?fr=aladdin"
            target="block">线性回归</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src="{{ url_for('static', filename='2.png')}}">
            <p class="symptom">均方误差 MSE:0.49819179319929585<br>
                均方根误差 RMSE:0.7058270278186405<br>
                R平方为：0.5253703803859902</p>
            <a class="name"
            href="https://baike.baidu.com/item/%E5%B2%AD%E5%9B%9E%E5%BD%92/554917?fr=aladdin"
            target="block">岭回归</a>
        </div>
        <div class='pic'>
            <img class='x_pic' src="{{ url_for('static', filename='3.png')}}">
            <p class="symptom">均方误差 MSE:0.5212740031027919<br>
                均方根误差 RMSE:0.7219930769077997<br>
                R平方为：0.5033798525292528</p>
            <a class="name"
            href="https://baike.baidu.com/item/LASSO/20366865?fr=aladdin"
            target="block">lasso回归</a>
        </div>
        <div class='pic2'>
            <img class='x_pic' src="{{ url_for('static', filename='4.png')}}">
            <p class="symptom">均方误差 MSE:0.5212740009825569<br>
                均方根误差 RMSE:0.7219930754394788<br>
                R平方为：0.5033798545492103</p>
            <a class="name"
            href="https://baike.baidu.com/item/%E5%BC%B9%E6%80%A7%E7%BD%91%E7%BB%9C/1257822?fr=aladdin#1"
            target="block">弹性网</a>
        </div>
    </div>
    <!-- ---------------------------------------------------------------------------------------------- -->
    <!-- 匿名问答区+轮播图 -->
    <div class='maintwo'>
        <!-- 轮播图 -->
        <div class='rollpicture'>
            <img src="{{ url_for('static', filename='000.png')}}">
        </div>
        <!-- 问答区 -->
        <div class='q_a' id='data'>
            <div class="head">
                <h1>数据输入</h1>
              </div>
              <div class="question">
              <form method="post">
                  <table class="biao" >
                      <tr>
                          <td width="100px" class="block">lcavol:</td><td width="150px"><input type="text" name="lcavol"></td>
                      </tr>
                      <tr>
                          <td width="100px" class="block">lweight:</td><td width="150px"><input type="text" name="lweight"></td>
                      </tr>
                      <tr>
                        <td width="100px" class="block">age:</td><td width="150px"><input type="text" name="age"></td>
                    </tr>
                    <tr>
                        <td width="100px" class="block">lbph:</td><td width="150px"><input type="text" name="lbph"></td>
                    </tr>
                    <tr>
                        <td width="100px" class="block">svi:</td><td width="150px"><input type="text" name="svi"></td>
                    </tr>
                    <tr>
                        <td width="100px" class="block">lcp:</td><td width="150px"><input type="text" name="lcp"></td>
                    </tr>
                    <tr>
                        <td width="100px" class="block">gleason:</td><td width="150px"><input type="text" name="gleason"></td>
                    </tr>
                    <tr>
                        <td width="100px" class="block">pgg45:</td><td width="150px"><input type="text" name="pgg45"></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="button"><input type="submit" value="提交"><br></td>
                    </tr>
                    <tr>
                        <td colspan="2" >
                            {% for message in get_flashed_messages() %}
                                {{ message }}<br>
                            {% endfor %}
                        </td>
                    </tr>
                  </table>
              </form>
              </div>
        </div>
    </div>
    <!-- 底部栏 -->
    <div class='bottomlan'>非商业用途
    </div>
</body>
</html>